<template>
  <div class="index_header">
    <!-- title部分 -->
    <div class="header_title">
      <img :src="`${logoData.imagePath}${logoData.sysImg}`" alt="" />
      <span>{{ logoData.title }}</span>
    </div>
    <!-- 右侧部分 -->
    <div class="right">
      <div class="top">
        <img src="" alt="" />
      </div>
      <div class="main">
        <div class="classify">
          <!-- 小模块 -->
          <parallelogram
            v-for="(item, index) in views"
            :key="index"
            @click.native="change(index)"
            :plate="plate"
            :own="item.path"
          >
            {{ item.title }}
          </parallelogram>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import Parallelogram from "@/components/common/Parallelogram";
import axios from "axios";
import request from '@/utils/request.js'

export default {
  components: { Parallelogram },
  data() {
    return {
      logoData: {},
      plate: this.$route.fullPath,
      // 名称及路由
      views: [
        {
          title: "互联网失泄密态势感知",
          path: "/vscreen/main",
        },
      
      ],
      // 选中的icon
      selectedIcon: 1,
      //  是否全屏
      fullscreen: false,
    };
  },
  computed: {
    ...mapState(["theme"]),
  },
  methods: {
    ...mapMutations(["changeTheme"]),
    // 点击切换路由
    change(i) {
      this.plate = this.views[i].path;
      this.$router.push(this.views[i].path);
    },
    getLogo() {
      request({
        url:'/system/theme/logoData',
        method: 'get',
        remoteUrl:'/basic-api',
      }).then(res=>{
        this.logoData = res.white;
        this.logoData.imagePath = res.imagePath;
      })
    },
  },
  mounted() {
    this.getLogo();
  },
  watch: {
    "$route.path": {
      handler(newVal) {
        this.plate = newVal;
      },
    },
  },
};
</script>

<style lang="scss" scoped>
// 组件整体
.index_header {
  display: flex;
  height: 4rem;
  color: rgba($color: #fff, $alpha: 0.8);
  border-bottom: 1px solid #02467b;

  //   左侧标签部分
  .header_title {
    text-align: left;
    margin-right: 1.2rem;
    position: relative;
    width: 26rem;
    height: 100%;
    line-height: 3.4rem;
    font-size: 1.3rem;
    border-bottom: 1px solid #00aec2;
    user-select: none;
    font-weight: 700;
    vertical-align: middle;
    img {
      vertical-align: middle;
     height: 3.4rem;
      margin-right: 0.8rem;
      margin-left: 0.8rem;
    }
    &::before {
      content: "";
      position: absolute;
      bottom: 2px;
      left: 0;
      width: 100%;
      height: 0.4rem;
      background-color: rgba($color: #02467c, $alpha: 0.7);
    }
    // 右侧线
    &::after {
      content: "";
      right: -1rem;
      top: 0;
      position: absolute;
      height: 100%;
      width: 0.6rem;
      //   渐变色
      background: linear-gradient(to top, #00aec2, #020e57);
      transform: skew(-30deg);
    }
  }
  // 右侧部分
  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    // 顶部留线
    .top {
      width: 100%;
      margin-top: 0.1rem;
      margin-bottom: 0.8rem;
      img {
        display: block;
        width: 100%;
      }
    }
    // 主体部分
    .main {
      display: flex;
      height: 5.4rem;
      width: 100%;
      justify-content: space-between;
      // 类别区域
      .classify {
        height: 100%;
        width: 78%;
        margin-left: 0.8rem;
        display: flex;
        justify-content: flex-start;
      }
      .icons {
        // margin-left: 30px;
        display: flex;
        flex-wrap: nowrap;
        height: 100%;
        flex: 1;
        transform: translateY(-15px);
        & > div {
          //width: 16%;
        }
     
      }
    }
  }
}
</style>
